<<template>
  <div class="toolBtnBar">
    <div class="fl btn_group">
      <el-button
        size="small"
        type="success"
        round
        @click="openGate('DYSZLF01')"
        icon="el-icon-coordinate"
        class="lightblue_btn handle_btn"
        >一号开
      </el-button>
      <el-button
        size="small"
        type="success"
        round
        @click="openGate('DYSZLF02')"
        icon="el-icon-coordinate"
        class="lightblue_btn handle_btn"
        >二号开
      </el-button>
      <el-button
        size="small"
        type="success"
        round
        @click="openGate('DYSZLF03')"
        icon="el-icon-coordinate"
        class="lightblue_btn handle_btn"
        >三号开
      </el-button>
      <el-button
        size="small"
        type="success"
        round
        @click="openGate('DYSZLF04')"
        icon="el-icon-coordinate"
        class="lightblue_btn handle_btn"
        >四号开
      </el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button
        size="small"
        type="success"
        round
        @click="openGate('DYSZLF11')"
        icon="el-icon-coordinate"
        class="lightblue_btn handle_btn"
        >入口开
      </el-button>
      <el-button
        size="small"
        type="success"
        round
        @click="openGate('DYSZLF12')"
        icon="el-icon-coordinate"
        class="lightblue_btn handle_btn"
        >出口开
      </el-button>
    </div>
    <div class="fr btn_group">
      <!-- <el-button
            size="small"
            type="info"
            round
            @click="clickRefresh"
            icon="el-icon-refresh"
            class="lightblue_btn version_btn"
            >当前页面为最新版本
          </el-button> -->
      <span v-if="showSwitchError" style="color:#ff5151">
        <i class="el-icon-warning"></i>
        {{ switchErrorMsg }}</span
      >
      <el-switch
        v-model="switchActive"
        active-color="#ff4949"
        inactive-color="#13ce66"
        active-text="下班"
        inactive-text="上班"
        :disabled="switchDisabled"
        @change="changeGateStatus"
      >
      </el-switch>
      <el-button
        size="small"
        type="primary"
        round
        @click="clickRefresh"
        icon="el-icon-refresh"
        class="lightblue_btn"
        >更新数据
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getRequest,
  getLoadmeterStatus,
  setLoadmeterStatus,
  getBarrierState,
  setBarrierState
} from "@/api/public";
export default {
  name: "",
  props: {},
  data() {
    return {
      // 上下班状态
      deviceStatus: "",
      // switch状态-下班是true 上班是false
      switchActive: "",
      // switch是否被禁止点击
      switchDisabled: false,
      showSwitchError: false,
      switchErrorMsg: ""
    };
  },
  watch: {
    // switchActive: {
    //   handler(newValue, oldValue) {
    //     if (this.switchErrorMsg == "") {
    //       // 过滤掉上下班失败后的那次调用
    //       if (newValue) {
    //         this.gateOff();
    //       } else {
    //         this.gateOn();
    //       }
    //     }
    //   }
    // }
  },
  computed: {},
  created() {
    this.checkGate();
  },
  beforeDestroy() {},
  mounted() {},
  methods: {
    openGate(code) {
      getRequest(`mine/iot/barrier?device_code=${code}&state=open`).then(
        response => {
          if (response.state) {
            // 成功
            this.$message.success("操作成功");
          } else {
            this.$message.error(response.message);
          }
        }
      );
    },
    clickRefresh() {
      this.checkGate();
      this.$emit("clickRefresh");
    },
    checkGate() {
      // getBarrierState("DYSZLF11").then(response => {
      //   if (response.state) {
      //     this.deviceStatus = response.value.state;
      //     this.switchActive = this.deviceStatus == "al_open";
      //   }
      // });

      getLoadmeterStatus().then(response => {
        this.deviceStatus = response.working;
        // active是下班！！
        this.switchActive = response.working == false;
      });
    },
    changeGateStatus(newStatus) {
      // console.log(newStatus);
      if (this.switchErrorMsg == "") {
        // 过滤掉上下班失败后的那次调用
        if (newStatus) {
          // true-下班
          this.gateOff();
        } else {
          this.gateOn();
        }
      }
    },
    gateOn() {
      // 设置上班，调用以下下2个接口
      this.switchDisabled = true;
      this.showSwitchError = false;
      this.switchErrorMsg = "";
      // Promise.all([
      //   setBarrierState("DYSZLF11", "barr_auto"),
      //   setBarrierState("DYSZLF12", "barr_auto")
      // ])
      //   .then(res => {
      //     console.log(res);

      //     this.$message.success("上班成功!");
      //     this.switchDisabled = false;
      //   })
      //   .catch(err => {
      //     console.log(err);

      //     this.switchActive = false;

      //     this.switchErrorMsg = "上班失败请重新开启!";
      //     this.showSwitchError = true;

      //     this.switchDisabled = false;
      //   });
      setLoadmeterStatus("true")
        .then(response => {
          this.$message.success("上班成功!");
          this.switchDisabled = false;
        })
        .catch(error => {
          this.switchActive = false;

          this.switchErrorMsg = "上班失败请重新开启!";
          this.showSwitchError = true;

          this.switchDisabled = false;
        });
    },
    gateOff() {
      // 设置下班
      this.switchDisabled = true;
      this.showSwitchError = false;
      this.switchErrorMsg = "";
      // Promise.all([
      //   setBarrierState("DYSZLF11", "al_open"),
      //   setBarrierState("DYSZLF12", "al_open")
      // ])
      //   .then(res => {
      //     console.log(res);
      //     this.$message.success("下班成功!");

      //     this.switchDisabled = false;
      //   })
      //   .catch(err => {
      //     console.log(err);

      //     this.switchActive = false;

      //     this.switchErrorMsg = "下班失败请重新开启!";
      //     this.showSwitchError = true;

      //     this.switchDisabled = false;
      //   });

      setLoadmeterStatus("false")
        .then(response => {
          this.$message.success("下班成功!");
          this.switchDisabled = false;
        })
        .catch(error => {
          this.switchActive = false;

          this.switchErrorMsg = "下班失败请重新开启!";
          this.showSwitchError = true;

          this.switchDisabled = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.toolBtnBar {
  height: 50px;
  width: 100%;
  .btn_group {
    position: relative;
    top: 8px;
    height: 100%;
    margin: 0 5px;
    button {
      margin: 0 5px;
    }
    .el-divider {
      height: calc(100% - 30px);
      margin: 0px 10px;
      background: #6b88bf;
    }
  }
}
</style>
